/*
* @Author: Yejing
* @Date: 2023-06-10 10:31:21
* @LastEditors: WangXi
* @LastEditTime: 2023-07-12 10:34:07
* @Description: desc
*/
<template>
	<view class="myNews-page">

		<!-- 头部 -->
		<c-navigation-bar :title="search.title" :navType='search.navType' :navPlaceholder='search.navPlaceholder'
			:navThmen='search.navThmen'>
		</c-navigation-bar>
		<!-- 消息列表 -->
		<view class="container-box ">
			<view class="" @click="readAll">
				{{$t('myNews.allread')}}
			</view>
			<scroll-list ref="msgList" :option="queryParams" @refresh="refresh" @load="loadMore">
				<view v-for="(item,index) in message.list" :key="index" class="messageBox" @click="details(item)">
					<view class="iconBox">
						<u-badge :is-dot="true" v-if="!item.remind" type="error" :offset="[0,0]"></u-badge>
						<imageForSize size="60" radius="50" v-if="item.source === 'concern'"
							:src="$u.file.getMedieUrl(publicJS.tryGet(()=>item.content.avatar))"></imageForSize>
						<u-icon v-else name="bell" size="54" color="white"></u-icon>
					</view>
					<view class="message">
						<view class="messageType">
							<!-- {{item.source=='notice'?$t('myNews.notice'):$t('myNews.push')}} -->
							{{ publicJS.MessageTypeEnum[item.source]}}
							<!-- {{publicJS}} -->
							<!-- {{$t('myNews.SystemMessages')+$t('myNews.OrderMessages')+$t('myNews.ActiveMessage')}} -->
						</view>
						<view class="messageTime">
			
									{{publicJS.timeZoneSwitching(item.createTime,"DD/MM/YYYY")}}
						</view>
						<view class="message" v-html="publicJS.jsonEn(item.title)">
						</view>
						<view class="deleteBtn" @click.stop="deleteMessage(item.id)">
							{{$t('myNews.delete')}}
						</view>
					</view>
				</view>
			</scroll-list>
		</view>
		<promptDialog ref="promptDialog"></promptDialog>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//搜索
				search: {
					navThmen: 'line',
					navPlaceholder: 'Donate for',
					navType: 'navBackTitle',
					title: this.$t('myNews.News')
				},
				// 消息
				message: {
					// 请求数据
					data: {
						// "total": 0,
						// "count": true,
						"pageSize": 10,
						"pageNum": 1,
						// "startTime": "",
						// "endTime": "",
						"id": "",
						"name": "",
						"startDate": "2023-01-01",
						"endDate": "2050-12-31"
					},
					// 列表
					list: [],
				},
				messageList: [{
						type: 0,
						time: 'October 02, 2021 (10:34 AM)',
						messageContent: 'Order #294859 has been completed and arrived at the destination address.'
					},
					{
						type: 0,
						time: 'October 02, 2021 (10:34 AM)',
						messageContent: 'Order #294859 has been completed and arrived at the destination address.'
					},
					{
						type: 0,
						time: 'October 02, 2021 (10:34 AM)',
						messageContent: 'Order #294859 has been completed and arrived at the destination address.'
					},
				]

			}
		},
		onLoad() {
			this.message.data.pageNum = 1
			// 获取消息
			this.getMessageAjax(false)
		},
		onShow() {},
		onHide() {},
		watch: {
			vuex_receive_message_status: {
				handler(val) {
					if (val) {
						this.$refs.msgList.scrollTop = this.$refs.msgList.currentScrollTop
						setTimeout(() => {
							this.updateMessage()
						}, 3000)
					}
				},
				depp: true
			}
		},
		computed: {
			queryParams() {
				return {
					pageNum: 1,
					size: this.message.data.pageSize,
					offsetBottom: 10,
					contentHeight: 0,
					safeArea: true,
					auto: false,
					emptyText: this.$t('system.NoRecord'),
					noMoreText: this.$t('system.NoFurtherDataAvailable'),
					showPullDown: false,
					loadDisabled: false
				}
			},
		},
		methods: {
			details(item) {
				(!item.remind) && this.readOne(item.id)
				console.log(item);
				if (item.source === 'concern') {
					return
					this.$u.route('pages/user/components/userInfo', {

						userId: item.content.userId
					})
				} else {
					this.$u.vuex('vuex_message_curretn_info', item);
					uni.navigateTo({
						url: "/pages/myNewsDetails/myNewsDetails?id=" + item.id
					});
				}

			},
			// 删除消息
			deleteMessage(id) {
				this.$refs.promptDialog.show({
					confirm: (c) => {
						this.deleteMessageAjax(id, c)
					},
					close() {

					},
					title: this.$t('modify.hint'),
					des: this.$t('myNews.ConfirmToDeleteTheMessage'),
					btnText: this.$t('system.affirm')
				})
			},
			// 删除消息接口
			deleteMessageAjax(id, c) {
				this.$u.post('/app/openSysMessage/deleteSysMessage/' + id).then(res => {
					this.message.list = this.message.list.filter(f => f.id !== id)
					if (this.message.list.length === 0) {
						uni.hideTabBarRedDot({
							index: 3
						})
					}
					c()
				})
			},
			// 获取消息 add：是否追加列表，懒加载
			getMessageAjax(add) {
				this.$u.post('/app/openSysMessage/pageByApp', this.message.data).then(res => {
					const data = res.data.records.map(m => {
						let content
						try {
							let content = ''
							if (m.source !== 'concern') {
								content = JSON.parse(m.content).data
							} else {
								content = JSON.parse(JSON.parse(m.content).data)
							}
							return {
								...m,
								content
							}
						} catch (e) {
							console.log(e);
							return {
								...m,
								content
							}
						}
						return {
							...m,
							content
						}
					})
					if (add) {
						this.message.data = {
							...this.message.data,
							pageNum: this.message.data.pageNum + 1
						}
						this.message.list = [...this.message.list, ...data]
						this.$refs.msgList.loadSuccess({
							list: this.message.list,
							total: res.data.current === res.data.pages ? 0 : 100000
						})
					} else {
						this.message.list = data
						this.$nextTick(() => {
							this.$refs.msgList.refreshSuccess({
								list: this.message.list,
								total: res.data.current === res.data.pages ? 0 : 100000
							})
							if (this.message.list.some(s => s.remind == 0)) {
								uni.showTabBarRedDot({
									index: 3
								})
							}
						})
					}
				})
			},
			// 刷新
			refresh(paging) {
				this.message.data = {
					...this.message.data,
					pageNum: paging.page,
					pageSize: paging.size
				}
				this.getMessageAjax(false)
			},
			loadMore() {
				this.getMessageAjax(true)
			},
			// 全部已读
			readAll() {
				this.$u.post('/app/openSysMessage/saveRemind/' + '0').then(res => {
					this.message.list = this.message.list.map(m => ({
						...m,
						remind: 1
					}))
					uni.hideTabBarRedDot({
						index: 3
					})
				})
			},
			readOne(id) {
				// 想选择本地更新而不请求
				this.$u.post('/app/openSysMessage/saveRemind/' + id).then(res => {
					this.message.list = this.message.list.map(m => m.id === id ? {
						...m,
						remind: 1
					} : m)
					this.$u.init.queryMessageUnread()
				})
			},
			updateMessage() {
				this.refresh({
					page: 1,
					size: 10
				})
				this.$refs.msgList.scrollTop = 0
				this.$forceUpdate()
				this.$u.vuex('vuex_receive_message_status', 0)
			},
		}
	}
</script>

<style lang="scss">
	.myNews-page {
		.messageBox {
			margin: 34rpx 0;
			height: 172rpx;
			display: flex;
			border-bottom: 2px solid #E8E6EA;

			.iconBox {
				margin: 0 40rpx;
				height: 60rpx;
				width: 60rpx;
				background-color: #2934D0;
				display: flex;
				border-radius: 50%;
				justify-content: center;
				position: relative;
				align-items: center;
			}

			.message {
				flex: 1;
				position: relative;

				.messageType {
					height: 40rpx;
					font-size: 34rpx;
					font-family: SFUIDisplay-Regular, SFUIDisplay;
					font-weight: 400;
					color: #0A1F44;
					line-height: 40rpx;
				}

				.messageTime {
					height: 24rpx;
					font-size: 20rpx;
					font-family: SFUIDisplay-Regular, SFUIDisplay;
					font-weight: 400;
					color: #999CAD;
					margin: 12rpx 0;
					line-height: 24rpx;
				}

				.message {
					height: 56rpx;
					font-size: 24rpx;
					font-family: SFUIDisplay-Regular, SFUIDisplay;
					font-weight: 400;
					color: #0A1F44;
					line-height: 28rpx;
				}

				.deleteBtn {
					position: absolute;
					right: 0;
					top: 0;
					color: red;
				}
			}
		}





	}
</style>